<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lionet的小项目 - 做更好的自己(｡･∀･)ﾉﾞヾ(･ω･。)</title>
    <meta name="Keywords" content="lionet,项目,作品">
    <meta name="description" content="这里是lionet的在线项目哦, 一起来填充它吧，在控制台中查看详情~">
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <link rel="shortcut icon" href="https://img.jialecode.com/favicon.ico" type="image/x-icon">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 20px;
        }
        body{
            background: #ededed;
        }
        .container{
            width: 80%;
            margin: 0 auto;
        }

        header{
            height: 6rem;
            line-height: 6rem;
            
        }
        header .container{
            border-bottom: 1px solid #dedede;
        }

        .flex-around{
            display: flex;
            justify-content: space-around;
        }

        h1{
            color: #333;
            font-weight: 300;
        }

        a{
            color: #333;
            text-decoration: none;
        }
        a:hover{
            text-decoration: underline;
        }

        .search input{
            width: 8rem;
            height: 1.5rem;
            border-radius: .2rem;
            border: 1px solid #dedede;
            box-sizing: border-box;
            padding: .2rem;
            outline: none;
            opacity: .6;
        }
        .search input:focus{
            opacity: 1;
            border: 1px solid #43a01f;
        }

        .content{
            margin-top: 2rem;
            margin-left: 1rem;
        }

        .item{
            margin-bottom: 2rem;
            transition: .5s;
        }

        .fade-enter, .fade-leave-to{
            opacity: 0;
            height: 0;
        }
        .fade-enter-active, .fade-leave-active{
            transition: .4s;
        }

        .move-enter, .move-leave-to{
            opacity: 0;
            transform: translateY(2rem);
        }

        .min{
            font-size: 15px;
            color: #666;
        }
    </style>
</head>
<body>
    <div id="app">
        <header>
            <div class="container flex-around">
                <div class="logo">
                    <h1><a href="http://jialecode.com">Lionet</a></h1>
                </div>
                <div class="search">
                    <input 
                        @keyup="keyupSearchVal"
                        v-model="searchVal" 
                        type="text" 
                        placeholder="在这里搜索..."
                    />
                </div>
            </div>
        </header>

        <div class="content">
            <div class="container">
                <transition name="fade">
                    <div v-if="items.length <= 0">
                        emm... 没有任何数据...
                    </div>
                </transition>
                <transition-group name="move">
                    <item
                        v-for="(item,index) in items"
                        :item="item"
                        :key="index"
                    ></item>
                </transition-group>
            </div>
        </div>
    </div>

    <script>
        let item = {
            props: {
                item: Object,
            },
            template: `
                <div class="item">
                    <a :href="item.a" target="_blank">
                        <h2>{{ item.name }}</h2>
                        <p>{{ item.desc }}</p>
                    </a>
                    <p class="min">作者: {{ item.author }}</p>
                </div>
            `
        }

        new Vue({
            el: '#app',
            data: {
                res: [],
                items: [],
                searchVal: "",
            },
            components: {
                item
            },
            methods: {
                keyupSearchVal(){
                    let result = [];
                    let ValL = this.searchVal.toLowerCase();
                    let ValU = this.searchVal.toUpperCase();

                    this.res.forEach(item => {
                        if( item.name.match(ValL) || item.name.match(ValU) || 
                            item.desc.match(ValL) || item.desc.match(ValU) ||
                            item.author.match(ValL) || item.author.match(ValU) ){
                            result.push(item);
                        }
                    });

                    this.items = result;
                } 
            },
            mounted () {
                const _this = this;

                axios.get('/config.json')
                    .then(function(res){
                        _this.items = _this.res = res.data.items;
                    })
            }
        })

        console.log('%c想将你的web小项目上传到这里的话，可以以以下格式发送邮件给jialecode@qq.com', 'font-size: 20px');
        console.log('项目名称: xxx \n作者名称: xxx \n项目描述: xxx \n项目文件: ...');
    </script>
</body>
</html>